<template>
	<view class="">
		<view class="bottom_warp fixed-bottom bg-white p-2">
			<view class="flex align-center justify-between">
				<view class="flex">
					<view class="" @click="goPages('/subPages/exhibition/service/index?exhibitionId=' + exhibitionId)">
						<image class="m-auto" src="/static/img2/home/serve.png" mode="scaleToFill" style="width: 37rpx;height: 37rpx;"></image>
						<text class="font_24 c_9">展会服务</text>
					</view>
					<view class="ml-2" @click="collaborateShow = true">
						<image class="m-auto" src="/static/img2/home/cooperation.png" mode="scaleToFill" style="width: 42rpx;height: 37rpx;"></image>
						<text class="font_24 c_9">在线联系</text>
					</view>
				</view>
				<button v-if="active == 3" class="sub_btn join_btn">已结束</button>
				<view v-else>
					<!-- participate_status   0 未参展， 1 审核中， 2 参展中 -->
					<button v-if="status == 1" class="sub_btn join_btn" @click="apply(0)">审核中</button>
					<button v-else-if="status == 2" class="sub_btn check_btn" @click="apply(1)">参展中</button>
					<button v-else class="sub_btn bg_main" @click="apply(2)">报名参展</button>
				</view>
			</view>
		</view>
		<!-- 报名参展弹窗 -->
		<u-modal :show="modalShow" title="线上参展报名" :showConfirmButton="false" :closeOnClickOverlay="true" @close="modalShow = false">
			<view class="slot-content modal_warp">
				<view class="close_icon" @click="modalShow = false"><u-icon name="close" color="#999" size="20"></u-icon></view>
				<view class="my-2">
					<text class="label font font-weight-bold">参展范围：</text>
					<text class="font">{{ range || '暂无' }}</text>
				</view>
				<view class="flex my-2">
					<text class="label font font-weight-bold">参展产品：</text>
					<view class="flex flex-column">
						<view class="select_btn text-white rounded_10 font-sm text-center" :class="{ bg_main: pronum > 0 }" @click="checkPro">已选：{{ pronum }}</view>
						<text class="font_22 c_9 mt-1 text-center">至多选择5款产品参展</text>
					</view>
				</view>
				<view class="flex my-2">
					<text class="label font font-weight-bold text-right">留言：</text>
					<u--textarea style="font-size: 32rpx;" v-model="content" placeholder="请输入内容"></u--textarea>
				</view>
				<button class="submit bg_main text-white font-sm" @click="goJoin">申请参展</button>
				<view class="font_22 c_9 mt-1">提交申请后请等待审核，周期约为1-3个工作日，您也可以拨打电话40028479878了解审核进度</view>
			</view>
		</u-modal>
		<!-- 商务合作弹窗 -->
		<u-popup :show="collaborateShow" mode="center" @close="collaborateShow = false" @open="collaborateShow = true">
			<view class="py-2 px-4 popup_warp">
				<view class="close_icon" @click="collaborateShow = false"><u-icon name="close" color="#999" size="15"></u-icon></view>
				<view class="font text-center font-weight-bold">在线联系</view>
				<image class="p-2" src="/static/img2/my/solarbe.jpg" mode="aspectFill" :show-menu-by-longpress="true" style="width: 300rpx;height: 300rpx;"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { exhibitionApplyEnrol } from '@/api/exhibition/exhibition.js';
export default {
	props: ['status', 'exhibitionId', 'proNum', 'range', 'rangeId', 'active', 'isAdmin'],
	data() {
		return {
			modalShow: false,
			content: '', //留言
			collaborateShow: false,
			pronum: 0
		};
	},
	watch: {
		status(newV, oldV) {
			// console.log('status', newV);
		},
		proNum(newV, oldV) {
			this.pronum = newV;
		}
	},
	methods: {
		apply(num) {
			// console.log(num);
			if (num == 0) {
				uni.$u.toast('请耐心等待审核结果...');
				return;
			} else if (num == 1) {
				uni.$u.toast('您已参加此展会');
				return;
			} else {
				// console.log('isAdmin', this.isAdmin);
				if (!uni.getStorageSync('userInfo').hasLogin) {
					this.toLogin(); // 未登录
				} else if (uni.getStorageSync('userInfo').audit != 1) {
					if (uni.getStorageSync('userInfo').audit == 2) {
						uni.showModal({
							title: '通知',
							content: '您认证的企业还在审核中，请等待通过后申请参展',
							confirmText: '关闭',
							showCancel: false,
							success: res => {
								return;
							}
						});
					} else {
						uni.showModal({
							title: '通知',
							content: uni.getStorageSync('userInfo')?.audit == 3 ? '您的企业认证失败，请重新认证' : '您当前未完成企业认证，请完成认证后报名参展',
							confirmText: '前往认证',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/my/auth/index'
									});
								} else {
									return;
								}
							}
						});
					}
				} else if (this.isAdmin == 0) {
					uni.showModal({
						title: '提示',
						content: '抱歉，只有认证主企业才可以申请参展。',
						confirmText: '关闭',
						showCancel: false,
						success: res => {
							return;
						}
					});
				} else {
					this.modalShow = true;
					getApp().globalData.pro1 = [];
					getApp().globalData.pro2 = [];
					getApp().globalData.proMid = [];
					this.pronum = 0;
				}
			}
		},
		// 选择产品
		checkPro() {
			uni.navigateTo({
				url: '/subPages/exhibition/company/check_product?exhibitionId=' + this.exhibitionId
			});
		},
		// 申请参展
		goJoin() {
			this.modalShow = false;
			let msg = {
				zhanhui_id: this.exhibitionId,
				token: uni.getStorageSync('userInfo').token || '',
				related_id: getApp().globalData.pro1.join(','),
				product_id: getApp().globalData.pro2.join(','),
				mid: this.rangeId,
				content: this.content
			};
			exhibitionApplyEnrol(msg)
				.then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						setTimeout(() => {
							this.$emit('goJoin');
						}, 1000);
						// uni.navigateTo({
						// 	url: '/subPages/exhibition/index?id=' + this.exhibitionId
						// });
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('申请参展失败', err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.bottom_warp {
	box-shadow: 2px 2px 5px #686868;
	.sub_btn {
		width: 450rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #fff;
		font-size: 35rpx;
		font-weight: bold;
		margin-left: 40rpx;
	}
	.check_btn {
		background-color: #f0722d;
	}
	.join_btn {
		background-color: #d3d3d3;
	}
}
.modal_warp {
	position: relative;
	.close_icon {
		position: absolute;
		top: -100rpx;
		right: -30rpx;
	}
	.label {
		min-width: 150rpx;
	}
	.select_btn {
		width: 396rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #d3d3d3;
	}
	.submit {
		height: 60rpx;
		line-height: 60rpx;
	}
}
.popup_warp {
	position: relative;
	.close_icon {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}
}
</style>
